<template>
  <!-- <q-layout view="hHh LpR fFf"> -->
  <q-layout view="lHr LpR lFr">
    <router-view name="header" />
    <nav-drawer></nav-drawer>

    <q-page-container>
      <q-page
        class="flex flex-center"
        v-if="
          $route.meta.needAccount &&
          !$store.getters['persisted/accounts'].length
        "
      >
        <q-btn color="primary" outline label="登录账号" to="/accounts" />
      </q-page>
      <router-view v-else></router-view>
      <!-- <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view> -->
    </q-page-container>
  </q-layout>
</template>

<script>
import { defineComponent, provide, ref } from "vue";
import { createMetaMixin } from "quasar";
import NavDrawer from "src/components/NavDrawer.vue";
import { useStore } from "vuex";

export default defineComponent({
  components: { NavDrawer },
  name: "MainLayout",
  mixins: [
    createMetaMixin(function () {
      return { title: this.$route.meta.title };
    }),
  ],
  setup() {
    const loginPage = ref(false);
    provide("loginPage", loginPage);
    const $store = useStore();
    $store.dispatch("persisted/syncUserinfo");
    $store.dispatch("persisted/syncAccounts");
    return {
      loginPage,
    };
  },
});
</script>
